<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
    />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>充值记录</title>

    <link rel="stylesheet" href="static/css/common.css">

    <link rel="stylesheet" href="static/css/layout.css">


    <style>
        body,
        html,
        .m-body {
            height: 100%;
            overflow: hidden;
            /* background-color: red; */
        }

        .wallet_mask {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background-color: #eee;
            z-index: 970;
            opacity: 0.5;
            display: none;
        }

        .right_show {
            width: 70%;
            height: 100%;
            background: white;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 980;
            display: none;
            border-left: .01rem #eee solid;
        }

        .right_show .right_show_title {
            font-size: .32rem;
            padding: .3rem .3rem .1rem .3rem;
        }

        .right_show .right_show_btn_container {
            font-size: .3rem;
            padding: 0rem .2rem;
        }

        .right_show .right_show_btn {
            height: .68rem;
            line-height: .68rem;
            font-size: .32rem;
            float: left;
            background-color: #f6f6f6;
            width: 30%;
            margin: .06rem .06rem;
            text-align: center;
            border-radius: .1rem;
            vertical-align: middle;
        }


        .right_show .right_show_btn.active {
            background-color: #478ff5;
            color: white;
        }

        .right_show_bottom_wrap {
            line-height: .9rem;
            height: .9rem;
            border-top: .01rem #eee solid;
            position: absolute;
            top: calc(100% - .9rem);
            width: 100%;
        }

        .right_show_bottom_wrap div {
            line-height: .9rem;
            height: .9rem;
            width: 50%;
            float: left;
            text-align: center;
            font-size: .32rem;
        }

        .right_show_bottom_wrap .right_btn {
            line-height: .9rem;
            height: .9rem;
            width: 50%;
            float: left;
            background-color: #478ff5;
            text-align: center;
            font-size: .32rem;
            color: wheat;
        }
    </style>

</head>

<body class="m-body">

    <div class="m-header inline-block-container">
        <div class="m-header-back inline-block-container">
            <em></em>
            <span>返回</span>
        </div>
        <div class="m-header-title">
            充值记录
        </div>
        <div class="m-header-right">
            <div style="padding-right: .3rem" class="buz_blue_yellow filter_go">筛选</div>
        </div>
    </div>

    <div class="m-content">

        <div class="m-card">
            <div class="m-card-header inline-block-container">
                <div class="m-card-header-title">
                    币种USDT
                </div>
                <div class="m-card-header-right">
                    <span class="m-label m-label-primary">审核中</span>
                </div>
            </div>
            <div class="m-card-body clearfix">

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">234567890023</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">2014-10-10 14:34:44</div>
                </div>

            </div>
        </div>

        <div class="m-card">
            <div class="m-card-header inline-block-container">
                <div class="m-card-header-title">
                    币种USDT
                </div>
                <div class="m-card-header-right">
                    <span class="m-label m-label-success">审核中</span>
                </div>
            </div>
            <div class="m-card-body clearfix">

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>




            </div>
        </div>

        <div class="m-card">
            <div class="m-card-header inline-block-container">
                <div class="m-card-header-title">
                    币种USDT
                </div>
                <div class="m-card-header-right">
                    <span class="m-label m-label-fail">失败</span>
                </div>
            </div>
            <div class="m-card-body clearfix">


                <div class="m-card-line-item  inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>
                <div class="m-card-line-item  inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item  inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

                <div class="m-card-line-item  inline-block-container">
                    <div class="m-card-line-item-key">充值类型</div>
                    <div class="m-card-line-item-value">冷钱包</div>
                </div>

            </div>
        </div>





    </div>


    <div class="wallet_mask"></div>
    <div class="right_show">

        <div class="right_show_title clear">钱包类型</div>

        <div class="right_show_btn_container clear">
            <div class="right_show_btn">冷钱包</div>
            <div class="right_show_btn active">冷钱包</div>
        </div>

        <div class="right_show_title clear">状态</div>

        <div class="right_show_btn_container clear">
            <div class="right_show_btn">成功</div>
            <div class="right_show_btn active">审核中</div>
            <div class="right_show_btn ">失败</div>
        </div>


        <div class="right_show_bottom_wrap clear">
            <div class="left_btn filter_reset">重置</div>
            <div class="right_btn filter_comfirm">筛选</div>
        </div>

    </div>

    <script src='static/js/jquery-1.8.2.min.js'></script>
    <script src="static/js/common.js "></script>

    <link rel="stylesheet " href="static/plugins/swiper/swiper.min.css " />
    <script src="static/plugins/swiper/swiper.min.js "></script>

    <link rel="stylesheet " href="static/plugins/layer/mobile/need/layer.css ">
    <script src="static/plugins/layer/mobile/layer.js "></script>

    <script type="text/javascript ">
        $(function () {

console.log(document.documentElement.clientHeight);
       

             $(".quick_buy").click(function () {
                    layer.open({
                        title: [
                            '提示',
                            'background-color: #6AA5F5; color:#fff;'
                        ],
                        anim: 'up',
                        content: '您点我提交啦',
                        btn: ['知道了'],
                        yes: function (index) {
                            layer.close(index);
                        }
                    });
            });


            $(".filter_go").click(function () {
                $(".wallet_mask").show();
                $(".right_show").show();
            });


            $(".right_show .right_show_btn").click(function () {
                var parent=$(this).parent();
                $(".right_show_btn",parent).removeClass('active');
                $(this).addClass('active');
            });

            
            $(".right_show .filter_reset").click(function () {
                $(".right_show_btn").removeClass('active');
            });

            $(".right_show .filter_comfirm").click(function () {
                
                layer.open({
                        title: [
                            '提示',
                            'background-color: #6AA5F5; color:#fff;'
                        ],
                        anim: 'up',
                        content: '开始筛选,逻辑自行实现,再隐藏侧边和遮罩层',
                        btn: ['知道了'],
                        yes: function (index) {
                            layer.close(index);
                            $(".wallet_mask").hide();
                             $(".right_show").hide();

                        }
                });
            });

        });



    </script>
</body>

</html>